<template>
  <div>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px; margin-left: 20px;">
      <el-form-item label="审批人">
        <el-input v-model="queryParams.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="审批人">
        <el-input v-model="queryParams.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="审批人">
        <el-input v-model="queryParams.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="审批人">
        <el-input v-model="queryParams.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="审批人">
        <el-input v-model="queryParams.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="审批人">
        <el-input v-model="queryParams.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="审批人">
        <el-input v-model="queryParams.user" placeholder="审批人"></el-input>
      </el-form-item>

      <el-form-item label="活动区域">
        <el-select v-model="queryParams.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="index" label="序号" width="100">
      </el-table-column>
      <el-table-column prop="projectCode" label="项目编号" width="100">
      </el-table-column>
      <el-table-column prop="projectName" label="项目名称" width="120">
      </el-table-column>
      <el-table-column prop="projectYear" label="年份" width="120">
      </el-table-column>
      <el-table-column prop="projectClassify" label="项目分类" width="120">
        <template slot-scope="scope">
           {{ dictFilter('project_classify', scope.row.projectClassify)}}
        </template>
       
      </el-table-column>
      <el-table-column prop="projectType" label="项目类型" width="300">
        <template slot-scope="scope">
           {{ dictFilter('project_type', scope.row.projectType)}}
        </template>
      </el-table-column>
      <el-table-column prop="projectStage" label="项目阶段" width="300">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-sizes="pageResult.pageSizes" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pageResult.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { listProject } from '@/api/project/project.js'
import { allListData } from '@/api/system/dict/data.js'

import editTable from '../../tool/gen/editTable.vue'
export default {
  components: { editTable },
  props: {
  },
  data() {
    return {
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      pageResult:{
        pageSizes: [10, 50, 100, 200],
        total: 0,
      },
      dictList:[],
      dictQuery: ['project_classify', 'project_type','project_stage']
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    getTableList() {
      listProject(this.queryParams).then((result) => {
        this.pageResult.total = result.total
        this.tableData = result.rows
        //根据分页给数据加上序号
        const starIndex = ((this.queryParams.pageNum - 1) * this.queryParams.pageSize)+1
        this.tableData.map((item, index) => {
          item.index = starIndex + index
        })
      }).catch((err) => {

      });
    },
    onSubmit() {

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val
      this.getTableList()
    },
    getDicts(val) {
      allListData().then((res) => {
      res.rows.forEach((item) => {
        val.forEach((dict ) => {
          if (item.dictType === dict) {
            this.dictList.push(item)
          }
        })
      })
    })
    },
    dictFilter(dictType,dictValue) {
      let res=''
      this.dictList.forEach((item) => {
        if (item.dictType === dictType && item.dictValue === dictValue) {
          console.log(item);
          res =  item.dictLabel
        }
      })
      return res
    }
  },
  created() {
    this.getTableList()
    this.getDicts()
  },
  mounted() {
    // this.getTableList()


  }
}
</script>
<style scoped>
.input {
  width: 200px;
  margin-right: 50px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: right;
}
</style>